

<!-- 

    暂时不需要顶部导航栏

 -->

<script>
import DarkState from '@/components/DarkState.vue'
import getImageUrl from '@/utils/getImageUrl.js'
export default {

    name: 'DashboardHeader',
    components: {
        DarkState
    },
    data() {
        return {
            toIndexImageUrl: "https://www.bsnc.cn/images/20190826101731046x0i.png",
        }
    },
    methods: {
        toIndex() {
            this.$router.push('/')
        },
        logout() {
            this.$router.push('/login')
        },
    },
    computed: {
        toIndexImage() {
            return getImageUrl(this.toIndexImageUrl)
        }
    }
}
</script>

<template>
    <div id="dashboard-header">

        <div class="header-layout">
            <div class='logo-title' @click="toIndex">
                <el-image style="height: 55px;flex-shrink: 1;" :src="toIndexImage" alt="logo" />
            </div>
            <el-space :size="20" spacer="|" alignment="center">

                <el-badge value="new" style="margin-right: 20px">
                    <el-icon size="35px">
                        <BellFilled />
                    </el-icon>
                </el-badge>

                <!-- 暗黑模式 -->
                <DarkState />

                <el-dropdown>
                    <el-avatar>
                        <BellFilled />
                    </el-avatar>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="logout" icon="SwitchButton">
                                退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-space>
        </div>
    </div>
</template>


<style scoped lang="scss">
#dashboard-header {
    .header-layout {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--el-menu-border-color);
        height: 60px;
        width: 100%;
        padding-right: 100px;
        background-color: var(--el-menu-bg-color);
    }
}

.flex-grow {
    flex-grow: 1;
}
</style>